<template>
  <div class="talelist">
    <el-card shadow="hover" class="box-card">
      <TaleListTop
        @handleSearchQuery="handleSearchQuery"
        @resetAndQueryList="resetAndQueryList"
      ></TaleListTop>
    </el-card>

    <div class="bottom" style="margin-top: 20px">
      <el-card>
        <TaleListBottom ref="taleBottomRef"></TaleListBottom>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TaleListTop from './components/TaleListTop.vue'
import TaleListBottom from './components/TaleListBottom.vue'
const taleBottomRef = ref()
const searchData = ref(null)
const handleSearchQuery = (data: any) => {
  taleBottomRef.value?.fetchUserList(data)
  searchData.value = data
}

// 子组件清除表单内容，父组件触发事件同时获取最新列表数据
const resetAndQueryList = () => {
  taleBottomRef.value?.fetchUserList()
}
</script>

<style lang="scss" scoped>
.talelist {
  position: absolute;
  width: 100%;
}
</style>
